<template>
	<div id="lunbotu-box">
		<div id="lunbotu-show">	
			<ul>
				<li><img src="../../../public/img/lunbotu02.jpg"/></li>
				<li><img src="../../../public/img/lunbotu06.jpg"/></li>
				<li><img src="../../../public/img/lunbotu07.jpg"/></li>
				<li><img src="../../../public/img/lunbotu01.jpg"/></li>
				<li><img src="../../../public/img/lunbotu02.jpg"/></li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'lunbo'
	}
</script>

<style>
html{overflow: hidden;}
#lunbotu-box{width: 100%;height: 160px;}
#lunbotu-box ul{width: 500%;height: 160px;display: flex; position: absolute; animation: lunbo 15s linear infinite;}
#lunbotu-box li{width: 20%;height: 160px}
#lunbotu-box img{width: 100%;height: 160px;}

@keyframes lunbo{
	0%{left: 0%;}
	20%{left: 0%;}
	25%{left: -100%;}
	45%{left: -100%;}
	50%{left: -200%;}
	70%{left: -200%;}
	75%{left: -300%;}
	95%{left: -300%;}
	100%{left: -400%;}
}
</style>